<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%
    if (session.getAttribute("admin") == null)
        response.sendRedirect("admin_login.jsp");
%>
<html>
<head>
    <meta charset="UTF-8">
    <base href="<%=basePath%>">

    <title>My JSP 'newslist.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
        <link rel="stylesheet" type="text/css" href="styles.css">
        -->
    <link rel="stylesheet" type="text/css" href="EasyUI/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="EasyUI/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="EasyUI/demo.css">
    <script type="text/javascript" src="EasyUI/jquery.min.js"></script>
    <script type="text/javascript" src="EasyUI/jquery.easyui.min.js"></script>
</head>

<body>
<!-- 创建一个table -->
<table id="userListDg" class="easyui-datagrid"></table>

<!-- 创建工具栏 -->
<div id="userListTb" style="padding:2px 5px;">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-enable-user" plain="true" onclick="SetIsEnableUser(1);">启用客户</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-disable-user" onclick="SetIsEnableUser(0);" plain="true">禁用客户</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addUser();">添加用户</a>
</div>

<!-- 创建搜索栏 -->
<div id="searchUserListTb" style="padding:4px 3px;">
    <form id="searchUserListForm">
        <div style="padding:3px ">
            客户名称&nbsp;&nbsp;
            <input class="easyui-textbox" name="search_userName" data-options="onChange:searchUserInfo" id="search_userName"
                   style="width:110px"/>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="searchUserInfo();">查找</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-clean" plain="true" onclick="resetForm('searchUserListForm')">清空</a>
        </div>
    </form>
</div>

<%--添加用户--%>

<div id="addUserDlg" class="easyui-dialog" title="添加用户" closed="true">
    <form id="userForm" method="POST" action="">
        <table cellpadding="5">
            <tr>
                <td>用户名:</td>
                <td>
                    <input class="easyui-textbox" type="text" name="userName" data-options="required:true"/>
                </td>
            </tr>
            <tr>
                <td>真实姓名:</td>
                <td>
                    <input class="easyui-textbox" type="text" name="realName"/>
                </td>
            </tr>
            <tr>
                <td>用户密码:</td>
                <td>
                    <input id="pwd" class="easyui-passwordbox" passwordChar="❦" name="password" prompt="password" iconWidth="28"
                           value="123456" data-options="required:true"/>
                </td>
            </tr>
            <tr>
                <td>确认密码:</td>
                <td>
                    <input class="easyui-passwordbox" prompt="Confirm your password" passwordChar="❦" iconWidth="28"
                           validType="confirmPass['#pwd']"
                           data-options="required:true"/>
                </td>
            </tr>
            <tr>
                <td>性别:</td>
                <td>
                    <%--颜色修改easyui.css的radiobutton和radiobutton-inner的值--%>
                    <input class="easyui-radiobutton" name="sex" value="男" label="男:" labelWidth="25px"
                           style="width: 20px;height:20px"/>
                    <input class="easyui-radiobutton" name="sex" value="女" label="女:" labelWidth="25px"
                           style="width: 20px;height:20px;margin-left: 5px"/>
                </td>
            </tr>
            <tr>
                <td>地址:</td>
                <td>
                    <input class="easyui-textbox" type="text" name="address"/>
                </td>
            </tr>
            <tr>
                <td>邮箱:</td>
                <td>
                    <input class="easyui-textbox" type="text" name="email"/>
                </td>
            </tr>
            <tr>
                <td>状态:</td>
                <td>
                    <select class="easyui-combobox" name="status" style="width: 170px">
                        <option value="1">启用</option>
                        <option value="0">禁用</option>
                    </select>
                </td>
            </tr>
        </table>
        <div style="text-align:center;padding:5px">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="saveUser();">保存</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm();">清空</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="closeForm()">取消</a>
        </div>
    </form>
</div>


<script type="text/javascript">
    var urls;
    var data;

    /*添加用户*/
    function addUser() {
        $('#addUserDlg').dialog('open').dialog('setTitle', '新增商品类型');
        $('#addUserDlg').form('clear');
        /*设置默认选择男*/
        $("#addUserDlg").form("load", {
            "sex": "男",
            "status":1
        });
        urls = 'userinfo/addUser';
    }

    /*添加用户*/
    function saveUser() {
        $("#userForm").form("submit", {
            url: urls, //使用参数
            success: function (result) {
                var result = eval('(' + result + ')');
                if (result.success == 'true') {
                    $("#userListDg").datagrid("reload");
                    $('#addUserDlg').dialog('close');
                }
                $.messager.show({
                    title: "提示信息",
                    msg: result.message,
                    style: {
                        right: '',
                        top: document.body.scrollTop + document.documentElement.scrollTop,
                        bottom: ''
                    },
                    showSpeed: 300,
                    timeout: 2000
                });
            }
        });
    }

    //转换日期格式
    function changeDateFormat(cellval) {
        if (cellval != null) {
            var date = new Date(cellval);
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            return date.getFullYear() + "-" + month + "-" + currentDate;
        }
    }
    /*清空弹窗数据*/
    function clearForm() {
        $('#addUserDlg').form('clear');
    }

    function closeForm() {
        $('#addUserDlg').dialog('close');
    }

    /*确认密码框扩展*/
    $.extend($.fn.validatebox.defaults.rules, {
        confirmPass: {
            validator: function (value, param) {
                var pass = $(param[0]).passwordbox('getValue');
                return value == pass;
            },
            message: 'Password does not match confirmation.'
        }
    })

    /*清空条件查询的条件*/
    function resetForm(formId) {
        $('#' + formId).form('clear');
    };
    $(function () {
        $('#userListDg').datagrid({
            singleSelect: false,
            url: 'userinfo/list',
            queryParams: {}, //查询条件
            pagination: true, //启用分页
            pageSize: 10, //设置初始每页记录数（页大小）
            pageList: [10, 15, 20, 25, 30, 50, 80], //设置可供选择的页大小
            rownumbers: true, //显示行号
            fit: true, //设置自适应
            toolbar: '#userListTb', //为datagrid添加工具栏
            header: '#searchUserListTb', //为datagrid标头添加搜索栏
            columns: [[{ //编辑datagrid的列
                title: '序号',
                field: 'id',
                align: 'center',
                checkbox: true
            }, {
                field: 'userName',
                title: '登录名',
                width: 100
            }, {
                field: 'realName',
                title: '真实姓名',
                width: 80
            }, {
                field: 'sex',
                title: '性别',
                width: 100
            }, {
                field: 'address',
                title: '住址',
                width: 200
            }, {
                field: 'email',
                title: '邮箱',
                width: 150
            }, {
                field: 'regDate',
                title: '注册日期',
                width: 100,
                formatter: function (value, row, index) {
                    /*调用前端自定义日期转换方法*/
                    return changeDateFormat(value)
                }
            }, {
                field: 'status',
                title: '客户状态',
                width: 100,
                formatter: function (value, row, index) {
                    if (row.status == 1) {
                        return "启用";
                    } else {
                        return "禁用";
                    }
                }
            }]]
        });
    });

    var urls;
    var data;

    function searchUserInfo() {
        var userName = $('#search_userName').textbox("getValue");
        $('#userListDg').datagrid('load', {
            userName: userName
        });
    }


    // 设置启用或禁用客户
    function SetIsEnableUser(flag) {
        var rows = $("#userListDg").datagrid('getSelections');
        if (rows.length > 0) {
            $.messager.confirm('Confirm', '确认要设置么?', function (r) {
                if (r) {
                    var uids = "";
                    for (var i = 0; i < rows.length; i++) {
                        uids += rows[i].id + ",";
                    }
                    $.post('userinfo/setIsEnableUser', {
                        uids: uids,
                        flag: flag
                    }, function (result) {
                        if (result.success == 'true') {
                            $("#userListDg").datagrid('reload');
                        }
                        $.messager.show({
                            title: '提示信息',
                            msg: result.message,
                            style: {
                                right: '',
                                top: document.body.scrollTop + document.documentElement.scrollTop,
                                bottom: ''
                            },
                            showSpeed: 300,
                            timeout: 2000
                        });
                    }, 'json');

                }
            });
        } else {
            $.messager.alert('提示', '请选择要启用或禁用的客户', 'info');
        }
    }

</script>
</body>
</html>
